<template>
  <div id="navmenu" class="container">
    <div class="center">
      <div class="navcate">
        <ul class="leftNavcate">
          <BaseTitle>
            <template>
              <span class="title">{{ $t('幻灯片分类') }}</span>
            </template>
            <template #right>
              <div class="el-icon-plus cate-add" @click="addCate"></div>
            </template>
          </BaseTitle>
          <li v-for="item in cateList" :key="item.id" :class="activeId == item.id ? 'activeitem' : ''">
            <span class="navtitle" @click="changeCate(item)">
              {{ item.id }}-{{ item.title }}
            </span>
            <div class="icon">
              <i class="el-icon-delete" @click="deleCate(item)" />
              <i class="el-icon-edit" @click="editCate(item)" />
            </div>
          </li>
        </ul>
        <div class="rightmenu">
          <BaseTitle :title="cateTitle">
            <template #right>
              <el-button type="primary" icon="el-icon-plus" @click="addSlide">
                {{ $t('添加幻灯片') }}
              </el-button>
            </template>
          </BaseTitle>
          <div class="file-box" ref="fileBox" v-resize="monResize">
            <ul class="file-list" v-loading="loading" v-show="slideList.length">
              <li class="file-card" v-for="item in slideList" :key="item.id + item.title">
                <div class="icon-box">
                  <BaseImg :src="item.attachment.url" alt="" class="img" />
                </div>
                <h4>{{ item.title }}</h4>
                <div class="size-oper">
                  <el-switch v-model="item.status" :active-value="1" :inactive-value="2"
                    active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)"
                    @change="changeStatus(item)" :width="30" class="switch" />
                  <el-dropdown @command="handleCommand($event, item)" trigger="click">
                    <i class="el-icon-more"></i>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="edit">
                        {{ $t('编辑') }}
                      </el-dropdown-item>
                      <el-dropdown-item command="del">
                        {{ $t('删除') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </li>
              <li class="file-card none" v-for="none in occupant" :key="none"></li>
            </ul>
            <el-empty v-if="slideList.length == 0"></el-empty>
          </div>
          <BaseDialog :title="addForm.id ? this.$t('编辑') : this.$t('添加')" :dialog-show.sync="dialogShow" width="50%"
            footer @submit="submit">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-position="top">
              <el-form-item :label="$t('标题')" prop="title">
                <el-input v-model="addForm.title" />
              </el-form-item>
              <el-form-item :label="$t('副标题')" prop="sub_title">
                <el-input v-model="addForm.sub_title" />
              </el-form-item>
              <el-form-item :label="$t('链接地址')" prop="url">
                <el-input v-model="addForm.url" />
              </el-form-item>
              <el-form-item :label="$t('描述')" prop="description">
                <el-input v-model="addForm.description" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" />
              </el-form-item>
              <el-form-item :label="$t('排序')">
                <el-input v-model="addForm.sort" />
              </el-form-item>
              <el-form-item :label="$t('状态')" prop="status">
                <el-select v-model="addForm.status">
                  <el-option :label="$t('显示')" :value="1" />
                  <el-option :label="$t('隐藏')" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item size="small" :label="$t('图片')" prop="attachment">
                <div class="attachment_imgBox" @click="openList('image')">
                  <img v-if="addForm.attachment" :src="imageUrl" class="attachmentImg" />
                  <i v-else class="el-icon-camera" />
                </div>
                <Attachment ref="attachment" :dialog-show.sync="dialogShow3" :attachment-type="attachmentType"
                  @func="getData" />
              </el-form-item>
            </el-form>
          </BaseDialog>
        </div>
      </div>
    </div>
    <BaseDialog :title="addForm2.id ? this.$t('编辑') : this.$t('添加')" :dialog-show.sync="dialogShow2" width="50%" footer
      @submit="submitCate">
      <el-form ref="addForm2" :model="addForm2" :rules="rules2" label-position="top">
        <el-form-item :label="$t('分类名称')" prop="title">
          <el-input v-model="addForm2.title" />
        </el-form-item>
        <el-form-item :label="$t('分类简介')">
          <el-input v-model="addForm2.description" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import slideApi from '@/api/slide'

export default {
  data() {
    return {
      isMore: true,
      loading: false,
      occupant: [],
      offWidth: '',
      files: '',
      cateTitle: '',
      attachmentLimit: 10,
      dialogShow3: false,
      attachmentData: [],
      attachmentType: '',
      imageUrl: '',
      cateList: '', // 幻灯片分类列表
      activeId: '',
      siteId: '',
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      searchForm: {
        website_id: '',
        cate_id: ''
      },
      slideList: [], // 幻灯片列表
      addForm: {},
      rules: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入幻灯片标题'),
            trigger: 'blur'
          }
        ],
        attachment: [
          {
            required: 'true',
            message: this.$t('请选择图片'),
            trigger: 'change'
          }
        ]
      },
      dialogShow: false,
      dialogShow2: false, // 导航分类弹窗
      addForm2: {}, // 导航表单
      rules2: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入导航名称'),
            trigger: 'blur'
          }
        ]
      },
      id: '', // 幻灯片id
      navid: '', // 导航id
      langList: [],
      lang: '',
      category_id: '',
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      } // 分页器
    }
  },

  watch: {
    offWidth(data) {
      const length = Math.floor(data / 200) - 2
      this.occupant = []
      for (let i = 0; i < length; i++) {
        this.occupant.push(i)
      }
    }
  },
  created() {
    this.getCateList()
  },
  mounted() {
    this.$nextTick(() => {
      this.offWidth = this.$refs.fileBox.offsetWidth
    })
  },
  methods: {
    handleCommand(type, item) {
      this.files = item
      switch (type) {
        case 'edit':
          this.edit(item)
          break
        case 'del':
          this.del(item)
          break
      }
    },
    // 监听dom变化，计算每行排列几个
    monResize() {
      this.$nextTick(() => {
        this.offWidth = this.$refs.fileBox.offsetWidth
      })
    },
    // 幻灯片分类列表
    getCateList() {
      slideApi.slideCateList().then(res => {
        if (res.code == 0) {
          this.cateList = res.data
          if (res.data.length > 0) {
            this.changeCate(res.data[0])
            this.cateTitle = res.data[0].title
          }
        }
      })
    },
    changeCate(item) {
      this.activeId = item.id
      this.cateTitle = item.title
      this.getSlideList()
    },
    // 新增分类
    addCate() {
      this.addForm2 = {
        title: '',
        id: '',
        description: ''
      }
      this.dialogShow2 = true
    },
    // 编辑分类
    editCate(row) {
      this.addForm2 = {
        title: row.title,
        id: row.id,
        description: row.description
      }

      this.dialogShow2 = true
    },
    // 删除分类
    deleCate(row) {
      this.$confirm(this.$t('删除该分类'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          const val = {
            id: row.id
          }
          slideApi.slideCateDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getCateList()
            }
          })
        })
        .catch(() => { })
    },
    // 提交添加、修改分类
    submitCate() {
      this.$refs.addForm2.validate(valid => {
        if (valid) {
          if (!this.addForm2.id) {
            const val = {
              title: this.addForm2.title,
              description: this.addForm2.description
              //   website_id: this.searchForm.website_id,
              //   lang: this.lang
            }
            slideApi.slideCateSave(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow2 = false
                this.getCateList()
              }
            })
          } else {
            const val = {
              id: this.addForm2.id,
              title: this.addForm2.title,
              description: this.addForm2.description
            }
            slideApi.slideCateUpdate(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow2 = false
                this.getCateList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 幻灯片列表
    getSlideList() {
      const val = {
        slide_cate_id: this.activeId
        // page: this.page.currentPage,
        // limit: this.page.size
      }
      slideApi.slideList(val).then(res => {
        if (res.code == 0) {
          this.slideList = res.data
          this.loading = false
        }
      })
    },
    // 打开附件弹窗
    openList(val) {
      this.attachmentType = 2
      this.dialogShow3 = true
    },
    getData(data) {
      if (data.length > 1) {
        this.$message.error(this.$t('最多只能选择一张图片'))
      } else {
        this.addForm.attachment = data[0].id
        this.imageUrl = data[0].url
        this.dialogShow3 = false
      }
    },

    // 添加幻灯片
    addSlide() {
      this.addForm = {
        id: '',
        title: '',
        description: '',
        sub_title: '',
        url: '',
        attachment: '',
        status: 1,
        sort: 100,
        slide_cate_id: this.activeId
      }
      this.dialogShow = true
    },
    // 编辑幻灯片
    edit(row) {
      this.imageUrl = this.$store.getters.imgURL + row.attachment.url
      this.addForm = {
        id: row.id,
        title: row.title,
        description: row.description,
        sub_title: row.sub_title,
        url: row.url,
        attachment: row.attachment.id,
        slide_cate_id: this.activeId,
        status: row.status,
        sort: row.sort
      }
      this.dialogShow = true
    },
    // 修改幻灯片状态
    changeStatus(row) {
      this.imageUrl = row.attachment.url
      this.addForm = {
        id: row.id,
        title: row.title,
        description: row.description,
        sub_title: row.sub_title,
        url: row.url,
        attachment: row.attachment.id,
        slide_cate_id: this.activeId,
        status: row.status,
        sort: row.sort
      }
      slideApi.slideUpdate({ ...this.addForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    // 提交添加、修改幻灯片
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            slideApi.slideSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getSlideList()
              }
            })
          } else {
            slideApi.slideUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getSlideList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除幻灯片
    del(row) {
      this.$confirm(this.$t('删除该幻灯片'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          const val = {
            id: row.id,
            slide_cate_id: row.slide_cate_id
          }
          slideApi.slideDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getSlideList()
            }
          })
        })
        .catch(() => { })
    }
  },
  // 分页规格改变
  handleSizeChange(val) {
    this.page.size = val
    this.page.currentPage = 1
    this.getSlideList()
  },
  // 分页点击
  handleCurrentChange(val) {
    this.page.currentPage = val
    this.getSlideList()
  }
}
</script>
<style lang="scss">
#navmenu {
  .leftNavcate {
    .title-container {
      margin-bottom: 16px;
    }
  }

  .title-container {
    padding-bottom: 0;
    margin-bottom: 10px;

    .base-title {
      line-height: 20px;
      height: 20px;
    }
  }

  .size-oper {
    .switch {
      .el-switch__core {
        height: 16px;
      }

      .el-switch__core::after {
        width: 14px;
        height: 14px;
        top: 0;
      }
    }

    .switch.is-checked {
      .el-switch__core::after {
        margin-left: -15px;
      }
    }
  }

  .el-select {
    width: 100%;
  }
}
</style>
<style scoped lang="scss">
.cate-add {
  color: #fff;
  margin-right: 16px;
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background-color: var(--huocms-com-color-primary);
  text-align: center;
  line-height: 18px;
}

.title-container .base-title {
  .title {
    font-size: 14px;
    line-height: 20px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    margin-left: 16px;
  }
}

.slideImg {
  width: 50px;
}

.center {
  background-color: #fff;
  border-top: none;

  h3.title {
    margin-left: 20px;
  }

  .navcate {
    display: flex;
    justify-content: left;
  }
}

.leftNavcate {
  list-style: none;
  margin-top: 16px;

  li.navtitle {
    font-size: 15px;
    font-weight: bold;
  }

  li {
    width: 220px;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .navtitle {
      cursor: pointer;
      width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon {
      display: none;

      i {
        cursor: pointer;
      }

      .el-icon-delete {
        margin-right: 10px;
      }
    }
  }

  .activeitem .icon {
    display: block;
  }

  // hover的样式
  li:hover {
    color: var(--huocms-com-color-primary);
    background-color: rgba(255, 125, 0, 0.06);

    .icon {
      display: block;
    }
  }

  //选中的样式
  li.activeitem {
    color: var(--huocms-com-color-primary);
    background-color: rgba(255, 125, 0, 0.06);
  }
}

.rightmenu {
  -webkit-box-flex: 3;
  box-flex: 3;
  padding-top: 16px;
  padding-left: 15px;
  border-left: solid 1px #eee;
  width: calc(100% - 220px);

  .addFmenu {
    margin-bottom: 20px;
  }
}

.status {
  padding: 5px 10px;
  color: #fff;
  border-radius: 5px;
}

.status.show {
  background-color: #0bc40f;
}

.status.hide {
  background-color: #df9513;
}

.addCmenu {
  color: #fff;
  background-color: #fe872b;
  border-color: #edeef3;
  border-radius: 16px;
}

.file-box {
  .file-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-between;

    .file-card {
      display: inline-block;
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
      border: 1px solid #f3f5f8;
      box-sizing: border-box;
      border-radius: 4px;

      .icon-box {
        background-color: #f8f9fb;
        text-align: center;
        overflow: hidden;
        height: 140px;
        line-height: 140px;

        .img {
          max-width: 100%;
          max-height: 100%;
          border-radius: 4px 4px 0 0;
        }

        .icon {
          width: 64px;
          height: 64px;
          margin-top: 38px;
        }
      }

      h4 {
        padding: 9px 9px 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 21px;
        margin-bottom: 5px;
      }

      .size-oper {
        padding: 0 9px;
        width: 100%;

        display: flex;
        justify-content: space-between;

        .switch.el-switch {
          .el-switch__core {
            height: 16px;
          }
        }

        .el-icon-more {
          color: #8291a9;
          cursor: pointer;
        }
      }
    }

    .file-card.none {
      height: 0;
      border: none;
      background-color: #f00;
      margin: 0;
    }
  }

  .center-btn {
    margin: 0 auto;
    display: block;
  }
}
</style>
